<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RabbitMQ Web 控制台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-4">

    <!-- ===== 第一部分：连接信息 ===== -->
    <div class="card mb-3">
        <div class="card-header">RabbitMQ 连接信息</div>
        <div class="card-body row g-3">
            <div class="col-md-3">
                <label class="form-label">Server IP</label>
                <input type="text" id="serverIp" class="form-control" placeholder="127.0.0.1">
            </div>
            <div class="col-md-2">
                <label class="form-label">Port</label>
                <input type="text" id="port" class="form-control" placeholder="5672">
            </div>
            <div class="col-md-3">
                <label class="form-label">Username</label>
                <input type="text" id="username" class="form-control" placeholder="guest">
            </div>
            <div class="col-md-4">
                <label class="form-label">Password</label>
                <input type="password" id="password" class="form-control">
            </div>
            <div class="col-12 mt-3">
                <button class="btn btn-success" id="btnConnect">Connect</button>
                <button class="btn btn-danger" id="btnDisconnect">Disconnect</button>
            </div>
        </div>
    </div>

    <!-- ===== 第二部分：发送消息 + 接收结果 ===== -->
    <div class="card mb-3">
        <div class="card-header">消息发送与接收</div>
        <div class="card-body">
            <div class="row">
                <!-- 左侧：发送消息表单 -->
                <div class="col-md-6 border-end">
                    <div class="mb-3">
                        <label class="form-label">Topic</label>
                        <select id="sendTopic" class="form-select">
                            <option value="topic1">topic1</option>
                            <option value="topic2">topic2</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payload</label>
                        <textarea id="payload" class="form-control" rows="5" placeholder="输入消息内容..."></textarea>
                    </div>
                    <div>
                        <button class="btn btn-primary" id="btnSend">发送消息</button>
                    </div>
                </div>

                <!-- 右侧：接收到的结果 -->
                <div class="col-md-6">
                    <label class="form-label">接收结果</label>
                    <textarea id="recvResult" class="form-control" rows="8" readonly placeholder="收到的消息会显示在这里..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 第三部分：消息列表 ===== -->
    <div class="card">
        <div class="card-header">已接收消息列表</div>
        <div class="card-body">
            <div class="col-md-6 mb-3">
                <label class="form-label">Topic 列表</label>
                <select id="recvTopic" class="form-select">
                    <option value="topic1">topic1</option>
                    <option value="topic2">topic2</option>
                </select>
            </div>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">时间</th>
                        <th scope="col">Topic</th>
                        <th scope="col">Payload</th>
                    </tr>
                </thead>
                <tbody id="recvGrid">
                    <!-- JS 动态渲染 -->
                </tbody>
            </table>
        </div>
    </div>

</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 页面交互逻辑 -->
<script>
document.getElementById('btnConnect').addEventListener('click', () => {
    const ip = document.getElementById('serverIp').value;
    const port = document.getElementById('port').value;
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    fetch('/connect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ip, port, username, password })
    })
    .then(resp => resp.json())
    .then(data => alert("连接结果: " + data.message))
    .catch(err => alert("连接错误: " + err));
});

document.getElementById('btnDisconnect').addEventListener('click', () => {
    fetch('/disconnect', { method: 'POST' })
        .then(resp => resp.json())
        .then(data => alert("已断开: " + data.message));
});

document.getElementById('btnSend').addEventListener('click', () => {
    const topic = document.getElementById('sendTopic').value;
    const payload = document.getElementById('payload').value;

    fetch('/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ topic, payload })
    })
    .then(resp => resp.json())
    .then(data => {
        const recvBox = document.getElementById('recvResult');
        recvBox.value = `[${new Date().toLocaleTimeString()}] ${data.message}\n` + recvBox.value;
    });
});

// 添加一条接收消息到表格
function addMessage(time, topic, payload) {
    const grid = document.getElementById('recvGrid');
    const row = document.createElement('tr');
    row.innerHTML = `<td>${time}</td><td>${topic}</td><td>${payload}</td>`;
    grid.prepend(row); // 最新消息在顶部
}
</script>

</body>
</html>
